<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				position: relative;
				width: 512px;
				height: 384px;
			}
			.box img {
				width: 100%;
				height: 100%;
			}
			.overlay {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(147, 112, 230, 0.7); 
				color: white;
				padding: 20px;
				box-sizing: border-box;
				opacity: 0;
				transition: opacity 0.5s ease;
			}
			.box:hover .overlay {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="./6-2.jpg">
			<div class="overlay">
				<h1 style="text-align: center;">刀刀狗系列</h1>
				<hr>
				<span>雨过了</span>
				<br>
				<span>我站在电线杆上，</span>
				<br>
				<span>等风，</span>
				<br>
				<span>把我吹干…</span>
				<br>
				<p style="text-align: right; margin-top:120px;">详细</p>
			</div>
		</div>
	</body>
</html>